<template>
    <div>
        <div class="user">
            <div class="photo">
                <img src="../../../assets/img/lq.png" @click="maxImg" alt="">
                <div class="del">x</div>
            </div>
            <div class="integral">积分:347</div>
            <div class="outLogin" @click="out">退出登录</div>

        </div>
        <div class="roll">
            <i class="icon iconfont icon-viewlist"> </i>
            <marquee behavior="" direction="left">新上线更稳定的付费快递查询接口</marquee>
        </div>

        <div id="maxImg" v-show="flag" @click="minImg">
            <div id="maxImg-box">
                <img src="../../../assets/img/lq.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'wgy-user',
    data() {
        return {
            flag:false
        };
    },
    created() {
    },
    methods: {
        // 点击放大图片
        maxImg() {
            this.flag = true
        },
        // 缩小图片
        minImg() {
            this.flag = false
        },
        // 退出登录
        out() {
            this.$router.push('login')
        }
    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
.user{
    width: 100%;
    height: 3rem;
    font-size: .3rem;
    color: #fff;
    background-color: sandybrown;
    position: relative;
    .photo{
        position: absolute;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
        background-color: sienna;
        top: .8rem;
        left: .4rem;
        .del{
            width: .3rem;
            line-height: .18rem;
            text-align: center;
            border: 1px solid #eee;
            height: .3rem;
            border-radius: 50%;
            background-color: darkolivegreen;
            position: absolute;
            top:-6px ;
            left: 60px;
        }
        img{
        border-radius: 50%;
        width: 100%;
        height: 100%;

        }
    }
    .integral{
        width: 2rem;
        position: absolute;
        top: 1.5rem;
        left: 2.4rem;
        height: .6rem;
        border-radius:.12rem ;
        line-height: .6rem;
        padding-left: .2rem;
        background-color:darkgray ;
    }
    .outLogin{
        position: absolute;
        top: 2.3rem;
        left: 2.4rem;
    }
}
.roll{
    width: 100%;
    height: 1rem;
    background-color: #fff;
    font-size: .5rem;
    margin-bottom: .2rem;
    line-height: 1rem;
    padding-left: .4rem;
    display: flex;
    color: red;
    marquee{
        font-size: .26rem;
    }
}
#maxImg{
    width: 100%;
    position: fixed;
    
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.8);
    height: 100%;
    #maxImg-box{
        width: 100%;
        height: 70%;
        background-color: brown;
        margin: 120px 0 ;
        img{
            width: 100%;
            height: 100%;
        }

    }
}
</style>
